<template>
    <div class="newsinfo-container">
        <h3 class="title">新闻标题</h3>
        <p class="subtitle">
            <span>发表时间：2019-10-08 12:12:12</span>
            <span>点击：0次</span>
        </p>
        <hr>
        <div class="content">
            要问满天星的花语是什么，其实，满天星看起来楚楚动人、温柔多情。 在插花时，常用满天星作配材，使花簇更加柔美可人。当别人送你一捧满天星意味着我在思念你，你是清纯的，给我一个梦境，我是真心喜欢你的，拥有你我很喜悦，这是我想给你的浪漫。还有我们一起守望爱情、让我关怀你把、思恋(此思恋非彼思念)、我不希望我是你的配角、你是我的真爱以及你拥有一颗纯洁的心灵。<br>
            1，蓝色满天星花语：真心的喜欢你，我愿一直关怀你，你是我的真爱。<br>2，粉红色满天星花语：青春时期青涩的爱，永远不可或缺的配角，甘做配角的爱。<br>3，白色满天星花语：我爱你，胜过爱爱情，更胜过爱自己。<br>
        </div>

        <!-- <h3 class="title">{{ newsinfo.title }}</h3>
        <p class="subtitle">
            <span>发表时间：{{ newsinfo.add_time | dateFormat }}</span>
            <span>点击：{{ newsinfo.click }}次</span>
        </p>
        <hr>
        <div class="content" v-html="newsinfo.content"></div> -->

        <!-- <comment-box :id="this.id"></comment-box> -->
        <comment-box></comment-box>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
//导入评论子组件
import comment from '../subcomponents/comment.vue'

export default {
    // data(){
    //     return{
    //         id: this.$route.params.id,   //将URL传递过来的id值挂载到data上，方便调用
    //         newsinfo: {}
    //     };
    // },
    // created() {
    //     this.getNewsInfo();
    // },
    // methods:{
    //     getNewsInfo(){  //获取新闻详情数据
    //         this.$http.get('api/getnew/'+this.id).then(result => {
    //             if(result.body.status === 0){
    //                 this.newsinfo = result.body.message[0];
    //             }
    //             else{
    //                 Toast('获取新闻失败！');
    //             }
    //         })
    //     }
    // },
    components: {  //注册子组件
        "comment-box": comment
    }
}
</script>

<style lang="scss">
.newsinfo-container{
    padding: 0 4px;
    .title{
        font-size: 16px;
        text-align: center;
        margin: 15px 0;
        color: red;
    }
    .subtitle{
        font-size: 13px;
        color: #226aff;
        display: flex;
        justify-content: space-between;
    }
    .content{
        font-size: 14px;
        color:grey;
        img{
            width: 100%;
        }
    }
}
</style>